import React, { Component } from 'react';
import './toast.css'
import config from '../config.js'
import { withRouter,BrowserRouter, Route, Link } from "react-router-dom";
class Toast extends Component {
    constructor() {
        super();
        this.state = {
            msg: '获取验证码',
            phone: '',
            btn: true,
            telError: '',
            code: '',
            submitbtn: false,
            status:'',
            active:true,
        }

        // this.handleEditFinish=this.handleEditFinish.bind(this);
    }
    // handleEditFinish(){
    //     console.log(this.state.isname)
    //     if(this.state.isname==false){
    //         var newState={
    //             nickname_active:false
    //         } 
    //         this.props.onChange({nickname_active:false});//回调函数传递参数给父组件
    //     }else{

    //     }
      
    // }
    
    telCheck(event) {
        this.tel = event.target.value
        // console.log(this.tel)  
        var reg = /^1[34578]\d{9}$/;
        if (reg.test(this.tel) == false) {
            this.setState({
                telError: "请输入正确的手机号"
            })
        } else {
            this.setState({
                phone: this.tel.substring(0, 11)
            })
        }
        this.checkAll()
    }
    codeCheck(event) {
        var code = event.target.value
        this.setState({
            code: code
        })
        this.checkAll()
    }
    sendcode() {
        if (this.state.phone.length == 11 && this.state.btn == true) {
            var arg = {
                mobile: this.state.phone,
                key: '31'
            }
            var that = this;
            config.sendRequest(config.url.getCode, arg, function (res) {
                alert(res.info)
                that.setState({
                    btn: false,
                })
                var time = 59;
                var inter = setInterval(function () {
                    that.setState({
                        msg: time + "秒后重新验证",
                    })
                    time--;
                    if (time <= 0) {
                        clearInterval(inter)
                        that.setState({
                            msg: "获取验证码",
                            btn: true
                        })
                    }
                }, 1000);
            })
        }
    }
    checkAll() {
        if (this.state.code.length > 0 && this.state.phone.length == 11) {
            this.setState({
                submitbtn: true
            })
        }
    }
    submit(e,history) {
        var that = this
        if (this.state.submitbtn) {
            var arg = {
                mobile: this.state.phone,
                mcode: this.state.code
            }
            config.sendRequest(config.url.smsLogin, arg, function (res) {
                console.log(res)
                sessionStorage.setItem('info',JSON.stringify(res.data));
                if(res.status==200){
                    // that.props.callbackParent(status);
                    console.log(res.data.name.length)
                    if(res.data.name.length>0){
                        that.props.onChange({nickname_active:true});
                       history.push("/list")
                    }else{
                        that.props.onChange({nickname_active:false});
                    }

                    // that.props.onChange({nickname_active:false});


                    // that.props.onChange({nickname_active:false});//回调函数传递参数给父组件
                    that.setState({active:false})   
                }              
            })
        }
    }
    render() {
        var status=this.props.status
        console.log("========toast===============")
console.log(this.props.test2.history)
        var myhistory=this.props.test2.history;

        return (
            <div className={this.state.active? ' toast': 'noactive toast'}>
                <div className='title'>登录/注册</div>
                <div className='form'>
                    <div className='text-center'>
                        <input type="text" className='tel' placeholder='请输入手机号码' onChange={event => this.telCheck(event)} />
                    </div>
                    <div className='text-center yanzheng'>
                        <input type="text" className='code' placeholder='请输入验证码' onChange={(event) => this.codeCheck(event)} />
                        <div className={this.state.btn ? 'btn get-code' : 'btn disbtn'} onClick={() => this.sendcode() } >{this.state.msg}</div>
                    </div>
                </div>
                <div className='xieyi'>
                    注册和登录成功默认同意
                    <a href="https://h5.meckeeper.com/wap/business_manager/xieyi/xieyi.html">《迈迈管家平台的服务协议》</a>
                </div>
                <div className='text-center'>
                    <div className={this.state.submitbtn ? 'submit submitbtn' : 'submit'} onClick={() =>  this.submit({status},myhistory) }> 确认</div>
                </div>
                {/* <link to="/list">跳到我的</link> */}
            </div>
        )
    }
}

export default withRouter(Toast)